{include file='header'/}
<style>
    .icon {width: 20px;height: 20px;vertical-align: -0.15em;fill: currentColor;overflow: hidden;font-size: 2.5rem;margin-right: 5px;}
</style>
<body>
<blockquote class="layui-elem-quote quoteBox">
    <a class="layui-btn layui-btn-lg layui-btn-primary" href="?dirname={$uppath}">上级目录</a>
    <a class="layui-btn layui-btn-lg layui-btn-primary" href="javascript:;" onclick="create()">新建</a>
    <button id="refreshThis" class="layui-btn layui-btn-lg layui-btn-primary"><i
            class="layui-icon layui-icon-refresh"></i></button>
    <button class="layui-btn layui-btn-lg layui-btn-primary">当前路径：{$path}</button>
    <div class="layui-btn layui-btn-lg" style="float: right">文件夹：{$num['dir']}个，文件：{$num['file']}个</div>
</blockquote>

<table class="layui-table">

    <thead>
    <tr>
        <th>文件名</th>
        <th width="100">文件大小</th>
        <th width="100">图像预览</th>
        <th>创建时间</th>
        <th>最后修改时间</th>
        <th width="250">操作</th>
    </tr>
    </thead>
    <tbody>
    {volist name="dirs" id="vo"}
    <tr>
        <td>
            <div style="display:flex;margin: 3px auto;">
                <svg class="icon" aria-hidden="true">
                    <use xlink:href="{$vo.icon}"></use>
                </svg>
                {$vo.dir ? '<a href="?dirname='.$vo.dirname.'">'.$vo.name.'</a>' : $vo.name}
            </div>
        </td>
        <td>{$vo.size|changeSize=###,2}</td>
        <td>{$vo.dirname|getpic|raw}</td>
        <td>{$vo.ctime|date="Y-m-d"}</td>
        <td>{$vo.mtime|date="Y-m-d"}</td>
        <td>
            {eq name="$vo.dir" value="0"}
            <button class="layui-btn layui-btn-normal layui-btn-sm edit" data-url="{$vo.dirname|urlencode=###}">编辑
            </button>
            {/eq}
            <button class="layui-btn layui-btn-danger layui-btn-sm del" data-url="{$vo.dirname|urlencode}">删除
            </button>
            <button class="layui-btn  layui-btn-sm rename" data-url="{$vo.dirname|urlencode=###}"
                    data-name="{$vo.dirname|basename=###}">重命名
            </button>
            {eq name="$vo.dir" value="0"}
            <button class="layui-btn layui-btn-primary layui-btn-sm down" data-url="{$vo.dirname|urlencode=###}">下载
            </button>
            {/eq}
        </td>
    </tr>
    {/volist}
    </tbody>
</table>
<div id="page"></div>

{include file='footer'/}
<script src="__STATIC_ADMIN__/js/iconfont.js"></script>
<script>
    layui.use(['form','element', 'layer', 'table', 'laypage'], function () {
        var table = layui.table
            , $ = layui.jquery
            , layer = layui.layer
            , form = layui.form
            , laypage = layui.laypage;

        layer.photos({
            photos: '.layui-table'
            , anim: 0 //0-6的选择，指定弹出图片动画类型，默认随机（请注意，3.0之前的版本用shift参数）
        });
        function ajaxPost(url, data, m = null){
            $.post(url, data, function (res) {
                if (res.code == 1) {
                    m == null ? '' : layer.close(m);
                    layer.msg(res.msg, {icon:1,time:500}, function () {
                        location.reload();
                    });
                    //刷新父页面
                } else {
                    m == null ? '' : layer.close(m);
                    layer.msg(res.msg,{icon:5,time:1000},function () {});
                }
            }, 'json');
        }
        $('td img').hover(function () {
            var img = "<img class='img_msg' src='" + $(this).attr('src') + "' style='width:200px;' />";
            img_show = layer.tips(img, this, {
                tips: [1, 'rgba(220,220,220,.95)'],
                area: ['228px']
            });
        }, function () {
            layer.close(img_show);
        });

        $('td img').attr('style', 'max-width:70px');


        // 删除
        $('.del').click(function () {
            var url = "{:url('file/del')}";
            var data = $(this).data('url');
            layer.confirm('确认删除?', {icon: 3, title: '温馨提示'}, function (index) {
                var m = layer.msg('数据提交中，请稍候', {icon: 16, time: false, shade: 0.8});
                ajaxPost(url, {data:data}, m);
                layer.close(index);
            });

        });
        // 重命名
        $('.rename').click(function () {
            var url = "{:url('file/rname')}";
            var data = $(this).data('url');
            var oldName = $(this).data('name');
            layer.prompt({
                value: oldName,
                title: '请输入新文件名',
            }, function (value, index, elem) {
                var m = layer.msg('数据提交中，请稍候', {icon: 16, time: false, shade: 0.8});
                ajaxPost(url, {oldname: data, newname: value}, m);
                layer.close(index);
            });
            return false;


        });
        // 文件编辑
        $('.edit').click(function () {
            var data = $(this).data('url');
            var _url = "{:url('file/edit')}";
            var url = "{:url('file/edit')}" + '?file=' + data;
            //WeAdminShow("编辑","{:url('file/edit')}?file="+data);
            $.get(_url, {file: data}, function (res) {
                if (res.code == 0) {
                    layer.msg(res.msg);
                } else {
                    //WeAdminShow("正在编辑","{:url('file/edit')}");
                    layer.open({
                        title: '正在编辑：' + decodeURIComponent(data),
                        type: 2,
                        content: url,
                        maxmin: true,
                        area: ['70%', '90%'],
                        success: function (layero, index) {
                            var body = layer.getChildFrame('body', index);
                            var iframeWin = window[layero.find('iframe')[0]['name']];
                            body.find('#filename').val(data)
                        },
                    });
                }
            });


            return false;
        });
        // 文件下载
        $('.down').click(function () {
            var url = "{:url('file/down')}";
            var data = $(this).data('url');
            $.post(url, {file: data}, function (res) {
                console.log(res);
                if (res.code == 0) {
                    layer.msg(res.msg);
                } else {
                    // 转换完成，创建一个a标签用于下载
                    var a = $("<a></a>");
                    $(a).attr('href', url + '?file=' + data);
                    $("body").append(a);  // 修复firefox中无法触发click
                    $(a)[0].click();
                    $(a).remove();
                }
            }, 'json');
        });
        // 分页设置
        laypage.render({
            elem: 'page'
            , count: '{$page["count"]}'
            , limit: '{$page["limit"]}'
            , curr: '{$page["curr"]}'
            , layout: ['prev', 'page', 'next', 'skip']
            , jump: function (obj, first) {
                if (!first) {
                    location.href = '?dirname=<?php echo urlencode($path.DIRECTORY_SEPARATOR);?>&page=' + obj.curr;
                }
            }
        });
        // 刷新
        $('#refreshThis').click(function () {
            location.reload();
        });

    });

    function create() {
      layer.open({
        type: 2,
        title: '新建文件（夹）',
        shadeClose: true,
        shade: 0.8,
        area: ['500px','330px'],
        content:"{:url('create')}?path={$path_encode}"
      });
    }
</script>
</body>
</html>